<template>
  <div class="weather-card">
    <div class="bac">
      <svg
        fill="none"
        viewBox="0 0 342 175"
        height="85"
        width="300"
        xmlns="http://www.w3.org/2000/svg"
        class="background"
      >
        <path
          fill="#7c9efb"
          d="M0 66.4396C0 31.6455 0 14.2484 11.326 5.24044C22.6519 -3.76754 39.6026 0.147978 73.5041 7.97901L307.903 62.1238C324.259 65.9018 332.436 67.7909 337.218 73.8031C342 79.8154 342 88.2086 342 104.995V131C342 151.742 342 162.113 335.556 168.556C329.113 175 318.742 175 298 175H44C23.2582 175 12.8873 175 6.44365 168.556C0 162.113 0 151.742 0 131V66.4396Z"
        ></path>
        <defs>
          <linearGradient
            gradientUnits="userSpaceOnUse"
            y2="128"
            x2="354.142"
            y1="128"
            x1="0"
            id="paint0_linear_103_640"
          >
            <stop stop-color="#5936B4"></stop>
            <stop
              stop-color="#362A84"
              offset="1"
            ></stop>
          </linearGradient>
        </defs>
      </svg>
    </div>
    <div class="weather">
      <svg
        class="icon"
        aria-hidden="true"
      >
        <use :xlink:href=svg[current]></use>
      </svg>

    </div>
    <p class="degree">{{weatcherData.temperature}}°</p>
    <div class="info">
      <div class="info-left">
        <p>{{weatcherData.weather}}</p>
      </div>
      <div class="info-right">{{weatcherData.city}}</div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      weatcherData: {
        city: "", //当前城市
        info: "",
        province: "",
        reportTime: "",
        temperature: 0, //当前温度
        weather: "", //天气
      },
      svg: [
        "#icon-qing",
        "#icon-icon_duoyun",
        "#icon-tianqitubiao-xiayu",
        "#icon-icon_yintian",
        "#icon-icon_leizhenyu",
        "#icon-icon_xiaoxue",
        "#icon-23qingtianwu",
      ],
    };
  },

  methods: {
    // 查询城市
    getCity() {
      let that = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            that.getWeather(result.city);
          }
        });
      });
    },
    //查询天气
    getWeather(city) {
      let that = this;
      //加载天气查询插件
      AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        let weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
          console.log(data);
          if (data.info == "OK") {
            that.weatcherData = data;
          }
        });
      });
    },
  },

  computed: {
    current() {
      let current = 1;
      switch (this.weatcherData.weather) {
        case "晴":
          current = 0;
          break;
        case "多云":
          current = 1;
          break;
        case "雨":
          current = 2;
          break;
        case "阴":
          current = 3;
          break;
        case "雷阵雨":
          current = 4;
          break;
        case "小雪":
          current = 5;
          break;
        case "雾":
          current = 6;
          break;
        default:
          current = 0;
      }
      console.log(current);
      return current;
    },
  },
  mounted() {
    this.getCity();
  },
};
</script>

<style coped>
* {
  padding: 0;
  margin: 0;
}
.info {
  display: flex;
  position: absolute;
  height: 30px;
  bottom: 0;
  justify-content: center;
  align-items: center;
}
.info-left {
  color: #eee;
  opacity: 0.5;
  margin-right: 60px;
}
.info-right {
  color: #eee;
}
.weather-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100px;
  width: 342px;
  overflow: auto;
  position: relative;
  background: #eee;
  background: linear-gradient(
    240deg,
    rgba(150, 50, 50, 0.3),
    rgba(0, 0, 200, 0)
  );

  background-size: contain;
  margin-right: 44px;
}
.bac {
  display: flex;
  margin-top: 14px;
}
.bac svg {
  width: 100%;
  height: 100%;
}
.weather {
  z-index: 2;
  display: flex;
  position: absolute;
  width: 50px;
  height: 50px;
  right: 100px;
  top: 10px;
}
.weather span {
  width: 40px;
  height: 40px;
}
.degree {
  position: absolute;
  left: 100px;
  font-size: 2rem;
  color: #eee;
}
</style>